<!-- directive:title 等待动画 3 -->
<!-- directive:breadcrumb 等待动画 -->
<div class="panel-body">
    <div style="width:300px;height:300px;position:relative" class="loading4432">sowhat</div>
    <script type="text/xianjs" ui-bs>
        <div style="width:300px;height:300px;position:relative" class="loading4432">sowhat</div>
    </script>
    <style type="text/css" ui-bs>
        .loading4432::before { content: ''; position: absolute; /*position: fixed;全页面*/ color: #fff; top: 0; left: 0; width: 100%; height: 100%; background: #5141d6; z-index: 3000; text-align: center; display: -webkit-flex; display: -ms-flexbox; display: flex; }
        .loading4432::after { content: ''; position: absolute; /*position: fixed;全页面*/ top: 50%; left: 50%; width: 70px; height: 70px; margin: -35px 0 0 -35px; pointer-events: none; z-index: 3001; border: 7px solid #4133b4; border-top-color: #fff; border-radius: 50%; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; -webkit-animation: rotateLoader 0.8s linear infinite forwards; animation: rotateLoader 0.8s linear infinite forwards; }
        @-webkit-keyframes rotateLoader { to { -webkit-transform: rotate3d(0, 0, 1, 360deg); transform: rotate3d(0, 0, 1, 360deg); } }
        @keyframes rotateLoader { to { -webkit-transform: rotate3d(0, 0, 1, 360deg); transform: rotate3d(0, 0, 1, 360deg); } }
    </style>
    <hr />
    <h3 class="bg-danger">以上写法很先进 但是渐变隐藏有bug 无法解决 还是接地气的写法比较好</h3>
    <div style="width:300px;height:300px;position:relative" class="fullloading44322"><i></i><b></b></div>
    <style type="text/css" ui-bs>
        .fullloading44322 i { content: ''; position: absolute; /*position: fixed;全页面*/  top: 50%; left: 50%; border-radius: 50%; width: 90px; height: 90px; z-index: 3001; border: 3px solid #959595; border-left-color: #D7000F; border-top-color: #D7000F; margin: -45px 0 0 -45px; -webkit-animation-name: spin; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; animation-name: spin; animation-duration: 1s; animation-iteration-count: infinite;-webkit-animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85); animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85); }
        .fullloading44322 b { content: ''; position: absolute; /*position: fixed;全页面*/  color: #fff; top: 0; left: 0; width: 100%; height: 100%; background: #D6D6D6; z-index: 3000; text-align: center; display: -webkit-flex; display: -ms-flexbox; display: flex; }
        @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
        @keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
    </style>
    <table>
        <tr><td><div class="loading-icon perpetuum-mobile"></div></td><td><code>cubic-bezier(0.55, 0.15, 0.45, 0.85)</code></td></tr>
        <tr><td><div class="loading-icon impetus"></div></td><td><code>cubic-bezier(0.5, -0.35, 0.5, 1.35)</code></td></tr>
        <tr><td><div class="loading-icon full-circle"></div></td><td><code>cubic-bezier(0.6, 0, 0.4, 1)</code></td></tr>
        <tr><td><div class="loading-icon gravity"></div></td><td><code>cubic-bezier(0.5, 0.8, 0.5, 0.2)</code></td></tr>
        <tr><td><div class="loading-icon overshot"></div></td><td><code>cubic-bezier(0.65, 1.5, 0.6, 0.95)</code></td></tr>
        <tr><td><div class="loading-icon downhill"></div></td><td><code>cubic-bezier(0.3, 0.1, 0.3, 0.85)</code></td></tr>
        <tr><td><div class="loading-icon pendulum"></div></td><td><code>cubic-bezier(0.3, 1.65, 0.7, -0.65)</code></td></tr>
        <tr><td><div class="loading-icon wtf"></div></td><td><code>cubic-bezier(1, -2.3, 1, 2.5)</code></td></tr>
    </table>
    <script type="text/xianjs" ui-bs>
        <div class="loading-icon perpetuum-mobile"></div>
        <div class="loading-icon impetus"></div>
        <div class="loading-icon full-circle"></div>
        <div class="loading-icon gravity"></div>
        <div class="loading-icon overshot"></div>
        <div class="loading-icon downhill"></div>
        <div class="loading-icon pendulum"></div>
        <div class="loading-icon wtf"></div> 
    </script>
    <style type='text/css' ui-bs>
        @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
        @keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
        .loading-icon { border-radius: 50%; width: 18px; height: 18px; border: 0.25rem solid #ddd; border-top-color: #333; margin: 0 8px; -webkit-animation-name: spin; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; animation-name: spin; animation-duration: 1s; animation-iteration-count: infinite; }
        .perpetuum-mobile { -webkit-animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85); animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85); }
        .impetus { -webkit-animation-timing-function: cubic-bezier(0.5, -0.35, 0.5, 1.35); animation-timing-function: cubic-bezier(0.5, -0.35, 0.5, 1.35); }
        .full-circle { -webkit-animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1); }
        .gravity { -webkit-animation-timing-function: cubic-bezier(0.5, 0.8, 0.5, 0.2); animation-timing-function: cubic-bezier(0.5, 0.8, 0.5, 0.2); }
        .overshot { -webkit-animation-timing-function: cubic-bezier(0.65, 1.5, 0.6, 0.95); animation-timing-function: cubic-bezier(0.65, 1.5, 0.6, 0.95); }
        .downhill { -webkit-animation-timing-function: cubic-bezier(0.3, 0.1, 0.3, 0.85); animation-timing-function: cubic-bezier(0.3, 0.1, 0.3, 0.85); }
        .pendulum { -webkit-animation-timing-function: cubic-bezier(0.3, 1.65, 0.7, -0.65); animation-timing-function: cubic-bezier(0.3, 1.65, 0.7, -0.65); }
        .wtf { -webkit-animation-timing-function: cubic-bezier(1, -2.3, 1, 2.5); animation-timing-function: cubic-bezier(1, -2.3, 1, 2.5); }
    </style>
    <div id="preloader"> <div id="loader"></div> </div>
    <style type="text/css" ui-bs>
        #preloader { width: 150px; height: 150px; }
        #loader { display: block; position: relative; width: 150px; height: 150px; margin: 0; border-radius: 50%; border: 3px solid transparent; border-top-color: #9370DB; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; }
        #loader:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #BA55D3; -webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite; }
        #loader:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #FF00FF; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite; }
        @-webkit-keyframes spin { 0%   { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } }
        @keyframes spin { 0%   { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } }
    </style>
</div>

